<template>
  <view class="goods-list">
    <view class="goods-column">
      <!-- 第一列：奇数列 -->
      <view
        class="goods-item"
        v-for="(item, index) in oddGoods"
        :key="index"
        @tap="goToDetail(item)"
      >
        <image class="goods-img" :src="item.picUrl" mode="widthFix"></image>
        <view class="goods-info">
          <view class="goods-name">{{ item.name }}</view>
          <view class="goods-brief">{{ item.brief }}</view>
          <view class="goods-price">
            <text class="price">¥{{ item.retailPrice }}</text>
            <text class="counter-price" v-if="item.counterPrice > 0"
              >¥{{ item.counterPrice }}</text
            >
          </view>
        </view>
      </view>
    </view>
    <view class="goods-column">
      <!-- 第二列：偶数列 -->
      <view
        class="goods-item"
        v-for="(item, index) in evenGoods"
        :key="index"
        @tap="goToDetail(item)"
      >
        <image class="goods-img" :src="item.picUrl" mode="widthFix"></image>
        <view class="goods-info">
          <view class="goods-name">{{ item.name }}</view>
          <view class="goods-brief">{{ item.brief }}</view>
          <view class="goods-price">
            <text class="price">¥{{ item.retailPrice }}</text>
            <text class="counter-price" v-if="item.counterPrice > 0"
              >¥{{ item.counterPrice }}</text
            >
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-tip" v-if="goodsList.length === 0">
      <image class="empty-icon" src="/static/images/common/empty.png"></image>
      <view class="empty-text">暂无可用商品</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      couponId: null,
      goodsList: [],
      page: 1,
      limit: 10,
      hasMore: true,
      loading: false,
      refreshing: false
    }
  },
  computed: {
    // 奇数列商品
    oddGoods() {
      return this.goodsList.filter((item, index) => index % 2 === 0)
    },
    // 偶数列商品
    evenGoods() {
      return this.goodsList.filter((item, index) => index % 2 === 1)
    }
  },
  onLoad(options) {
    if (options.couponId) {
      this.couponId = options.couponId
      this.loadGoodsList()
    }
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.refreshing = true
    this.page = 1
    this.hasMore = true
    this.goodsList = []
    this.loadGoodsList().then(() => {
      this.refreshing = false
      uni.stopPullDownRefresh()
    })
  },
  // 触底加载更多
  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.page++
      this.loadGoodsList()
    }
  },
  methods: {
    // 加载商品列表
    async loadGoodsList() {
      if (this.loading) return
      this.loading = true

      try {
        const res = await this.$get('coupon/goods', {
          couponId: this.couponId,
          page: this.page,
          limit: this.limit
        })

        if (res.errno === 0) {
          const newGoods = res.data.list || []
          this.hasMore = this.page < res.data.pages

          if (this.page === 1) {
            this.goodsList = newGoods
          } else {
            this.goodsList = [...this.goodsList, ...newGoods]
          }
        } else {
          uni.showToast({
            title: res.errmsg || '获取商品列表失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取商品列表失败', error)
        uni.showToast({
          title: '获取商品列表失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    // 跳转到商品详情
    goToDetail(item) {
      uni.navigateTo({
        url:
          '/pages/product-detail/index?id=' +
          item.id +
          '&couponId=' +
          this.couponId
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.goods-list {
  padding: 20rpx 32rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  display: flex;
  justify-content: space-between;
  gap: 20rpx;

  .goods-column {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .goods-item {
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    overflow: hidden;

    .goods-img {
      width: 100%;
      background-color: #f5f5f5;
    }

    .goods-info {
      padding: 16rpx;

      .goods-name {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 8rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .goods-brief {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 8rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .goods-price {
        display: flex;
        align-items: baseline;
        margin-bottom: 8rpx;

        .price {
          font-size: 32rpx;
          color: #b84a39;
          font-weight: bold;
        }

        .counter-price {
          font-size: 24rpx;
          color: #999;
          text-decoration: line-through;
          margin-left: 10rpx;
        }
      }
    }
  }

  .empty-tip {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;

    .empty-icon {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 20rpx;
    }

    .empty-text {
      font-size: 28rpx;
      color: #999;
    }
  }
}
</style>
